<template>
  <div style="width: 1000px">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-row :gutter="24">
        <el-col :span="12" :offset="0">
          <el-form-item label="物料编号" prop="matCode">
            <el-input v-model="ruleForm.matCode" />
            <!-- <el-checkbox-group v-model="form.type"> -->
            <el-checkbox
              v-model="systemNumber"
              @change="generateSystemNumber"
              value="Online activities"
              name="type"
              >系统编号</el-checkbox
            >
            <!-- </el-checkbox-group> -->
          </el-form-item>

          <el-form-item label="规格型号" prop="matModel">
            <el-input v-model="ruleForm.matModel" />
          </el-form-item>
          <el-form-item label="单位" prop="matUnit">
            <el-select
              v-model="ruleForm.matUnit"
              placeholder="please select your zone"
            >
              <el-option
                v-for="item in UnitList"
                :key="item.UnitId"
                :label="item.UnitName"
                :value="item.UnitId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="物料属性" prop="matPerMess">
            <el-select
              v-model="ruleForm.matPerMess"
              placeholder="please select your zone"
            >
              <el-option
                v-for="item in MessList"
                :key="item.AttId"
                :label="item.AttName"
                :value="item.AttId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="最小库存数" prop="matMin">
            <el-input v-model="ruleForm.matMin" />
          </el-form-item>
          <el-form-item label="物料有效期" prop="matDate">
            <el-input v-model="ruleForm.matDate" />
            <!-- <el-checkbox value="Online activities" name="type">无</el-checkbox> --> </el-form-item
          >天
          <el-form-item label="状态" prop="matState">
            <el-checkbox-group v-model="checkList">
              <el-checkbox :value="ruleForm.matState" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="备注" prop="matDesc">
            <el-input v-model="ruleForm.matDesc" type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0" prop="matName">
          <el-form-item label="物料名称">
            <el-input v-model="ruleForm.matName" />
          </el-form-item>
          <el-form-item label="品牌" prop="matBrand">
            <el-input v-model="ruleForm.matBrand" />
          </el-form-item>
          <el-form-item label="物料类别" prop="matType">
            <el-select
              v-model="ruleForm.matType"
              placeholder="please select your zone"
            >
              <el-option
                v-for="item in TypeList"
                :key="item.TypeId"
                :label="item.TypeName"
                :value="item.TypeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="采购单价" prop="matPrice">
            <el-input v-model="ruleForm.matPrice" />
          </el-form-item>
          <el-form-item label="最大库存数" prop="matMax">
            <el-input v-model="ruleForm.matMax" />
          </el-form-item>
          <el-form-item label="报警天数" prop="matPolice">
            <el-input v-model="ruleForm.matPolice" />
          </el-form-item> </el-col
      ></el-row>
      <el-form-item>
        <el-button type="primary" @click="addMatelView(ruleFormRef)">
          Create
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import axios from "axios";
import { formatDate } from "../production(生产管理)/filter.js";

const UnitList = ref([]);
const TypeList = ref([]);
const MessList = ref([]);
const systemNumber = ref(false);

// do not use same name with ref
interface RuleForm {
  matCode: string;
  matName: string;
  matModel: string;
  matBrand: string;
  matUnit: string;
  matType: string;
  matPerMess: string;
  matPrice: string;
  matMin: string;
  matMax: string;
  matDate: string;
  matPolice: string;
  matState: boolean;
  matDesc: string;
  matImage: string;
}
const checkList = ref([]);
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  matCode: "",
  matName: "",
  matModel: "",
  matBrand: "",
  matUnit: "",
  matType: "",
  matPerMess: "",
  matPrice: "",
  matMin: "",
  matMax: "",
  matDate: "",
  matPolice: "",
  matState: false,
  matDesc: "",
  matImage: "",
});

// 定义表单验证规则，只包含非空验证
const rules: FormRules = {
  matCode: [{ required: true, message: "请输入物料编号", trigger: "blur" }],
  matName: [{ required: true, message: "请输入物料名称", trigger: "blur" }],
  matModel: [{ required: true, message: "请输入规格型号", trigger: "blur" }],
  matBrand: [{ required: true, message: "请输入品牌", trigger: "blur" }],
  matUnit: [{ required: true, message: "请选择单位", trigger: "change" }],
  matType: [{ required: true, message: "请选择物料类别", trigger: "change" }],
  matPerMess: [
    { required: true, message: "请选择物料属性", trigger: "change" },
  ],
  matPrice: [{ required: true, message: "请输入采购单价", trigger: "blur" }],
  matMin: [{ required: true, message: "请输入最小库存数", trigger: "blur" }],
  matMax: [{ required: true, message: "请输入最大库存数", trigger: "blur" }],
  matDate: [{ required: true, message: "请输入物料有效期", trigger: "blur" }],
  matPolice: [{ required: true, message: "请输入报警天数", trigger: "blur" }],
  matState: [{ required: true, message: "请选择状态", trigger: "change" }],
  matDesc: [{ required: true, message: "请输入备注", trigger: "blur" }],
};

const GetUnitList = () => {
  axios.get("Materials/GetMatUnitInfoShow").then((res) => {
    UnitList.value = res.data;
  });
};

const generateSystemNumber = () => {
  if (systemNumber.value) {
    ruleForm.matCode = "JN-" + formatDate(new Date(), "yyyymdhs");
  } else {
    ruleForm.matCode = "";
  }
};

const GetTypeList = () => {
  axios.get("Materials/GetMatTypeinfoShow").then((res) => {
    TypeList.value = res.data;
  });
};

const GetMessList = () => {
  axios.get("Materials/GetMatattrShow").then((res) => {
    MessList.value = res.data;
  });
};

const addMatelView = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      axios.post("Materials/AddMaterial", ruleForm).then((res) => {
        if (res.data > 0) {
          ElMessage.success("添加成功！");
        } else {
          ElMessage.error("添加失败！");
        }
      });
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));

GetUnitList();
GetTypeList();
GetMessList();
</script>
